<template>
  <div class="flex-img">
    <div v-show="hideShow" class="el-upload-list el-upload-list--picture-card">
      <div class="el-upload-list__item is-success">
        <img class="flex-img__image" :src="image" alt="">
        <label class="el-upload-list__item-status-label">
          <i class="el-icon-upload-success el-icon-check" />
        </label>
        <span class="el-upload-list__item-actions">
          <span class="el-upload-list__item-delete">
            <i class="el-icon-delete" @click.stop="handleRemove()" />
          </span>
        </span>
      </div>
    </div>
    <el-upload
      v-show="!hideShow"
      class="image-uploader"
      :action="uploadUrl"
      :show-file-list="false"
      accept="image/jpeg,image/jpg,image/png"
      :on-success="imageUploadSuccess"
      :before-upload="beforeUpload"
    >
      <i class="el-icon-plus" />
    </el-upload>
    <!--<div slot="tip" class="el-upload__tip">尺寸宽度不低于640，高度不限制，支持jpg、png格式，1张上限</div>-->
  </div>
</template>
<script>
import {
  getToken
} from '@/utils/auth'
export default {
  props: ['image', 'clearList'],
  data() {
    return {
      uploadUrl: 'imgFileUploadApi', // 图片上传网址
      headers: {
        'Authorization': getToken()
      },
      file: this.image ? this.image : ''
    }
  },
  computed: {
    hideShow() { // 当图片多于一张的时候，就隐藏上传框
      return this.file !== ''
    }
  },
  watch: {
    image(value) {
      this.file = value
      console.log('爷爷', value)
    },
    clearList() {
      this.file = ''
    },
    file(value) {
      console.log('来了', value)
      const list = value
      this.$emit('update:image', list)
    }
  },
  methods: {
    imageUploadSuccess(response) {
      const { data: { url }} = response
      this.file = url
    },
    beforeUpload(file) {
      const imageSize = file.size / 1024 / 1024 < 10// 上传图片大小不超过10M
      if (!imageSize) {
        this.$message.error('上传封面大小不能超过 10MB!')
      }
      return imageSize
    },
    handleRemove() {
      this.file = ''
    }
  }
}
</script>

<style scoped>
    .flex-img {
        display: flex;
    }

    .image-uploader {
        background-color: #fbfdff;
        border: 1px dashed #c0ccda;
        border-radius: 6px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        width: 148px;
        height: auto;
        cursor: pointer;
        line-height: 146px;
        vertical-align: top;
        text-align: center
    }

    .image-uploader {
        font-size: 28px;
        color: #8c939d;
    }

    .image-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .flex-img__image {
        width: 146px;
        height: auto;

        border-radius: 6px;
    }
</style>
<style>
    .disabled {
        display: none;
    }

    .el-upload--picture-card {
        height: auto
    }

    .el-upload-list--picture-card .el-upload-list__item {
        height: auto;
    }

    .el-upload-list--picture-card .el-upload-list__item {
        overflow: hidden;
        background-color: #fff;
        border: 1px solid #c0ccda;
        border-radius: 6px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        width: 148px;
        height: auto;
        margin: 0 8px 8px 0;
        display: inline-block;
    }

    .el-upload-list__item.is-success .el-upload-list__item-status-label {
        display: block;
        position: absolute;
        right: -15px;
        top: -6px;
        width: 40px;
        height: 24px;
        background: #13ce66;
        text-align: center;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        -webkit-box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);
        box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);
    }

    .el-upload-list--picture-card .el-upload-list__item-actions {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        cursor: default;
        text-align: center;
        color: #fff;
        opacity: 0;
        font-size: 20px;
        background-color: rgba(0, 0, 0, 0.5);
        -webkit-transition: opacity .3s;
        transition: opacity .3s;
    }
</style>
